<template>
  <div>
    <div class="main-tab">
      <div class="my-balance">
        <div class="balance">
          <div class="my-title" v-if="loginStatus">待提现金额</div>
          <div class="my-amount" v-if="loginStatus">{{detail.reward}}</div>
          <x-button plain class="button" v-else link="registrationLogin">注册/登录</x-button>
        </div>
        <div class="handle">
          <div class="detail" @click="goWallet">
            <img class="icon" src="../../../static/img/my-1.png" />
            <div class="icon-name">查看明细</div>
          </div>
          <div class="gap"></div>
          <div class="withdrawal" @click="goCash">
            <img class="icon" src="../../../static/img/my-2.png" />
            <div class="icon-name">立即提现</div>
          </div>
        </div>
      </div>
      <group class="my-group">
        <cell class="cell" :title="item.title" is-link v-for=" (item, index) in cellList" :key="index" :link="loginStatus?item.path:'registrationLogin'" >
          <img slot="icon" width="25" class="cell-icon" :src="item.icon"/>
        </cell>
        <cell class="cell" title="联系客服" is-link @click.native="service" >
          <img slot="icon" width="25" class="cell-icon" src="../../../static/img/my-7.png"/>
        </cell>
      </group>
    </div>
    <confirm v-model="serviceShow"
             title="拨打客服电话"
             @on-cancel="onCancel"
             @on-confirm="onConfirm"
             @on-show="onShow"
             @on-hide="onHide">
      <p style="text-align:center;color: red;font-weight: bold;font-size: 1.5rem;line-height: 2.5rem">{{hotLine}}</p>
    </confirm>
    <b-tabbar :value="3" />
  </div>
</template>

<script>
import { getUserDetail } from '@/api/user'
import bTabbar from '../../components/Btabbar'
import { Confirm, cookie } from 'vux'
export default {
  name: 'my',
  components: {
    bTabbar,
    Confirm
  },
  data () {
    return {
      loginStatus: false,
      cellList: [
          {
            title:'我的客户经理',
            icon: require('../../../static/img/my-3.png'),
            path:'manager'
          },
          {
            title:'账号管理',
            icon: require('../../../static/img/my-4.png'),
            path: 'user'
          },
          {
            title:'我的团队',
            icon: require('../../../static/img/my-5.png'),
            path:'team'
          },
          {
            title:'我的推广',
            icon: require('../../../static/img/my-6.png'),
            path:'spread'
          },
        ],
      serviceShow: false,
      hotLine: '',
      detail: ''
    }
  },
  methods:{
    goWallet () {
      if (this.loginStatus) {
        this.$router.push('wallet')
      }  else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    goCash () {
      if (this.loginStatus) {
        this.$router.push('cash')
      }  else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }
    },
    service () {
      this.serviceShow = true
    },
    onCancel () {

    },
    onConfirm () {
      this.serviceShow = false
      window.location.href=`tel:${this.hotLine}`
    },
    onShow () {

    },
    onHide () {

    }
  },
  mounted () {
    if (this.globalData.cid) {
      this.loginStatus = true
      getUserDetail(this.globalData.cid).then( data => {
        this.detail = data
      })
    }
    let config = JSON.parse(sessionStorage.getItem('config'))
    if (config) this.hotLine = config.customerService
  }
}
</script>

<style scoped>
</style>
